iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0
生成式 AI

VIBE CODING 全紀錄:0 經驗用 AI 打造 PWA 兒童任務管理平台》系列 第 13

(Day 13)讓孩子愛上成語學習:AI 驅動的漸進式挑戰

  • 分享至 

  • xImage
  •  

在完成 冒險地圖功能 並部署上線後,我立刻讓自己的孩子開始試用平台。
雖然原本設計了 完成任務可以蒐集拼圖碎片、解鎖動物 的機制,孩子確實很喜歡,但我總覺得還有空間可以加入更多輔助學習的功能。

剛好最近孩子有在看成語故事書,我就想說乾脆將 成語學習 導入平台吧!
最初的構思是設計一個專門的成語學習頁面,讓孩子能自主在上面閱讀和學習。

不過想了想,這種被動的方式似乎很難讓孩子每天主動打開來用,效果可能有限。

於是,我開始與 AI 討論如何設計,才能既激起孩子的興趣,又兼顧良好的學習成效。
AI 建議我採用 「挑戰答題」 的形式,並且設定每日挑戰的條件限制。這樣:

  • 能創造期待感
  • 避免短時間內過度消耗內容
  • 形成每天持續參與的習慣

成語挑戰的規劃

最終我決定將挑戰與平台的 主線任務 結合:

  • 孩子每天完成主線後,觸發三次成語挑戰的機會
  • 每次挑戰都是 連續答題
  • 闖關成功就能解鎖一個全新的成語,並獲得 星星獎勵

AI 也提醒我,出題可以 根據已解鎖的成語 來進行,這樣每天的挑戰不僅能引入新知識,還能持續複習,形成漸進式學習循環。


成語資料的準備

既然平台的主題是 動物探險,成語自然也要呼應這個設定,所以我請 ChatGPT 幫忙生成大量與動物相關的成語及解釋。
原本打算一次產生 200 筆資料,但實測後發現會遇到不少問題:

  • 成語重複
  • 解釋不完整
  • 典故缺失

為什麼 AI 處理不好這類資料?

AI 的回答是,目前 AI 在處理 一次性大量產出且需高度正確的結構化資料 時,主要有三個挑戰:

  1. 知識來源零散
    AI 的知識來自書籍、網站、辭典、論文等多種來源,但這些資訊是分散的片段,並不是現成、完整且經過整理的「200 筆動物成語辭典」。

  2. 長程一致性難維持
    單筆生成時可以逐一檢查,但一次要生成 200 筆,就必須同時確保:

    • 不重複
    • 出處正確
    • 用詞適合小學生

    這對 AI 來說屬於「長程一致性」問題,生成過程中容易發生遺漏、重複、或格式不統一。

  3. 列表越長,錯誤越容易累積
    即使只有 1% 的錯誤率,生成 200 筆也可能出現 2 筆錯誤;而且這些錯誤可能是隱性的,例如故事細節與實際出處不符,需要人工或外部資料驗證才能發現。

我的暫時解法

後來我改用分批的方式:

  • 給予資料來源並分段產生成語列表
  • 分批讓 AI 檢查是否重複
  • 再分批補充解釋與典故

雖然多花一些時間,但資料品質明顯提升,也方便後續統一存成 JSON 格式,直接匯入系統中。

[
  {
    "成語": "畫蛇添足",
    "解釋": "原本畫好的蛇再加上腳,比喻做了多餘的事反而不好。",
    "典故": "古代寓言中,一隻狐狸被老虎抓住了。狐狸對老虎說..."
  }
]

之後有機會再研究怎樣用 AI 快速生成這種大量資料。對於教育性質應用來說,產生大量且正確的學習資料是非常常見的需求。

https://ithelp.ithome.com.tw/upload/images/20250814/201779279xfr9KON0Q.png


介面設計與效能優化

有了資料後,接下來就是頁面設計,我需要在左側欄新增「成語挑戰」分頁,按下後跳轉到成語挑戰頁面,並根據 JSON 內容列出成語按鈕。
下了提示詞後,AI 很快就產出了能直接運行的程式碼。

但實際測試時發現,顯示所有成語成一份列表,會造成載入過慢,而且可能造成部分裝置顯示不全。

最後我請 AI 改成 分頁顯示 來解決:

  • 每頁固定顯示一定數量的成語
  • 加入翻頁功能

挑戰功能的實作

因為平台先前已經開發了:

  • 語音模組
  • 問答模組
  • Firebase 資料庫存取功能

所以在實作成語挑戰時,其實可以直接複用現有架構。
例如:

請參考「今日行程」頁面的動物問答功能  
幫我改成成語挑戰版本  
設計連續答對十題即可解鎖新成語

AI 很快完成初版程式碼,我再根據資料庫結構,讓 AI 幫忙設計每天剩餘挑戰次數、通關狀態、已解鎖成語數量等等資料紀錄。

測試時,可以直接打開 Firebase Console 即時觀察:

  • 挑戰次數是否正確扣減?
  • 通關後是否新增解鎖成語紀錄?
  • 星星獎勵是否正確發放?

https://ithelp.ithome.com.tw/upload/images/20250814/20177927sNXOcZ6YAO.png


學習模組的第二塊拼圖

在完成功能測試後,我在「今日行程」頁面加入了一個貼心的小提示:

當孩子完成當天主線任務後,會跳出提醒「可以進行成語挑戰」。

這個細節改變了孩子的參與方式。
挑戰不再是冷冰冰的選項,而成了每天完成主線後的獎勵時刻。

整個成語挑戰功能,就像是平台拼圖上的第二塊學習碎片。
它讓知識不再孤立存在,而是與冒險地圖、任務解鎖、星星獎勵緊密連結。
希望能讓孩子在遊戲中自然地複習與吸收,不知不覺就把成語牢牢記住。

敬請期待下一篇:《成就抽獎系統:讓孩子在期待中培養堅持的力量》


上一篇
(Day 12)從任務清單到動物冒險地圖:AI 輔助下的兒童互動設計(下集)
下一篇
(Day 14)成就抽獎系統:讓孩子在期待中培養堅持的力量
系列文
VIBE CODING 全紀錄:0 經驗用 AI 打造 PWA 兒童任務管理平台》30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言